<template>
    <div class="commoncon login">
        <Other-Header @changelang="changeLanguage" bgColor="#5741d9"></Other-Header>
        <div class="comcont">
            <div class="layer" style="overflow:hidden;">
                <div class="sideinfo">
                    <img src="../assets/images/sideimg.png">
                    <h2>{{$t('l.personal_262')}}</h2>
                    <p>{{$t('l.personal_263')}}</p>
                </div>
                <!--登录-->
                <div class="logonpanel" v-show="!isShowPop">
                    <h2 class="paneltitle">{{$t('l.add_43')}}</h2>
                    <div class="regModeCon" style="margin-top:40px;">
                        <div class="putgroup clearfix">
                            <input class="comput" v-model="account" :placeholder="$t('l.add_44')">
                            <p class="errortext"></p>
                        </div>
                        <div class="putgroup">
                            <input class="comput" :class="passwordError?'error':''" type="password" @focus="passwordError=''"  v-on:keyup.enter="loginVerif" v-model="password" :placeholder="$t('l.personal_233')">
                            <p class="errortext">{{passwordError}}</p>
                        </div>
                        <div class="putgroup">
                            <nc-slider @callback="sliderHandle" @initcallback="initnc"></nc-slider>
                        </div>
                        <a class="btn big" @click="loginVerif">{{$t('l.header_13')}}</a>
                        <p class="regandforget clearfix">
                            <router-link to="/forgetpsd" class="fl">{{$t('l.personal_264')}}</router-link>
                            <router-link to="/register" class="fr">{{$t('l.personal_259')}}</router-link>
                        </p>
                        <p class="sgcinfo">{{$t('l.personal_261')}}</p>
                    </div>

                </div>
                <!--谷歌验证-->
                <div class="logonpanel" v-show="status=='ga' && isShowPop==true">
                    <h2 class="paneltitle pdm60">{{$t('l.add_31')}}</h2>
                    <div class="putgroup">
                        <input class="comput" v-model="verifyCode" v-on:keyup.enter="login" :placeholder="$t('l.add_45')">
                        <p class="errortext"></p>
                    </div>
                    <a class="btn big" @click="login">{{$t('l.header_13')}}</a>
                    <p class="regandforget clearfix">
                        <router-link :to="{path:'/announcement', query: {type: '1',search:$t('l.add_46')}}" class="fr">{{$t('l.add_46')}}？</router-link>
                    </p>
                    <p class="sgcinfo">{{$t('l.personal_261')}}</p>
                </div>
                <!--手机验证-->
                <div class="logonpanel" v-show="status=='phone' && isShowPop==true">
                    <h2 class="paneltitle pdm60">{{$t('l.add_47')}}</h2>
                    <p class="codetip" v-show="!sendAuthCode">{{$t('l.add_48')}} {{account}}</p>
                    <div class="putgroup">
                        <div class="codeput">
                            <input class="comput" v-model="verifyCode" v-on:keyup.enter="login" :placeholder="$t('l.add_45')">
                            <button v-show="sendAuthCode" class="getcode active" @click="sendPhoneCode" :disabled="!this.ncPass">{{$t('l.personal_45')}}</button>
                            <button v-show="!sendAuthCode" class="getcode">{{auth_time}}s</button>
                        </div>
                        <p class="errortext"></p>
                    </div>
                    <a class="btn big" @click="login">{{$t('l.header_13')}}</a>
                    <p class="regandforget clearfix">
                        <router-link :to="{path:'/announcement', query: {type: '1',search:$t('l.add_49')}}" class="fr">{{$t('l.personal_45')}}？</router-link>
                    </p>
                    <p class="sgcinfo">{{$t('l.personal_261')}}</p>
                </div>
                <!--邮箱验证-->
                <div class="logonpanel" v-show="status=='email' && isShowPop==true">
                    <h2 class="paneltitle pdm60">{{$t('l.add_50')}}</h2>
                    <p class="codetip" v-show="!sendAuthCode">{{$t('l.add_48')}} {{account}}</p>
                    <div class="putgroup">
                        <div class="codeput">
                            <input class="comput" v-model="verifyCode" v-on:keyup.enter="login" :placeholder="$t('l.add_45')">
                            <button v-show="sendAuthCode" class="getcode active" @click="sendEmailCode" :disabled="!this.ncPass">{{$t('l.personal_45')}}</button>
                            <button v-show="!sendAuthCode" class="getcode">{{auth_time}}s</button>
                        </div>
                        <p class="errortext"></p>
                    </div>
                    <a class="btn big" @click="login">{{$t('l.header_13')}}</a>
                    <p class="regandforget clearfix">
                        <router-link :to="{path:'/announcement', query: {type: '1',search:$t('l.add_49')}}" class="fr">{{$t('l.add_49')}}？</router-link>
                    </p>
                    <p class="sgcinfo">{{$t('l.personal_261')}}</p>
                </div>
            </div>
        </div>
        <Footer></Footer>

    </div>
</template>
<script>
import OtherHeader from "../components/otherHeader";
import Footer from "../components/footer";
import {api} from '../api/api';
import md5 from 'js-md5';
import NC from "../components/nc";
export default {
    name:"login",
    inject:['reload'],
    components: {
        OtherHeader,
        Footer,
        'nc-slider': NC
    },
    data() {
        return {
           account:"",
           password:"",
           gaCode:"",
           verifyCode:"",
           accountError:"",
           passwordError:"",
           status:"",
           isShowPop:false,
           sendAuthCode:true,
           auth_time: 0,
           loginSource:"",
            browser:"",
            deviceVersion:"",
            deviceType:"",
            mac:"",
            nc: null,
            ncPass: false,
            ncData: null
        }
    },
    created(){
    },
    methods:{
        changeLanguage(){
            this.ncReset();
        },
        initnc(nc){
            this.nc = nc
        },
        sliderHandle(nc, data) {
            this.nc = nc
            this.ncData = data
            this.ncPass = true
        },
        ncReset() {
            this.ncData = null
            this.ncPass = false
            this.nc && this.nc.reset()
        },
        getAuthCode() {
            this.sendAuthCode = false;
            this.auth_time = 60;
            var auth_timetimer =  setInterval(()=>{
                this.auth_time--;
                if(this.auth_time<=0){
                    this.sendAuthCode = true;
                    clearInterval(auth_timetimer);
                }
            }, 1000);
        },
        async bindStatus(){
            let that = this;
            let res = await api.bindStatus({account:that.account});
            if(res.data.code == 0){
                if(res.data.data.gaEnabled==1){
                    that.status = "ga"
                }
                that.isShowPop = true;
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        loginVerif(){
            let that = this;
            if(!that.account){
                that.$layer.msg(that.$t('l.add_44'))
                return;
            }
            if(that.password == ""){
                that.$layer.msg(that.$t('l.personal_233'))
                return;
            }
            if(!that.ncPass){
                that.$layer.msg(that.$t('l.add_144'))
                return;
            }

            //that.bindStatus();
            that.getPreLogin();
        },
        //预登录
        async getPreLogin(){
            let that = this;
            let res = await api.preLogin({
                account:that.account,
                password:md5(that.password),
                ncToken: that.ncData && that.ncData.nc_token,
                sessionId: that.ncData && that.ncData.sessionid,
                sig: that.ncData && that.ncData.sig,
                'scene':'nc_login'
            })
            if(res.data.code==0){
                if(res.data.data.bindStatus.gaEnabled==1){
                    that.status = "ga"
                }else if(res.data.data.bindStatus.phoneEnabled==1 && that.account.indexOf("@") == -1){
                    that.status = "phone"
                }else if(res.data.data.bindStatus.emailEnabled==1 && that.account.indexOf("@") != -1){
                    that.status = "email"
                }
                that.preToken = res.data.data.preToken;
                that.isShowPop = true;
            }else if(res.data.code==1020004){
                that.$layer.msg(that.$t('l.add_102'));
                that.ncReset();
            }else if(res.data.code==1020001){
                that.$layer.msg(that.$t('l.add_102'));
                that.ncReset();
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //登录
        async login(){
            let that = this;
            let res = await api.login({
                preToken:that.preToken,
                verifyCode:that.verifyCode,

            })
            if(res.data.code==0){
                localStorage.setItem("usertoken",res.data.data.token);
                localStorage.setItem("userintro",JSON.stringify(res.data.data.data));
                that.$store.commit('changestate');
                that.$layer.msg(that.$t('l.add_52'));
                that.loginLog();
                that.$router.push({
                    path: "/"
                });
            }else if(res.data.code==12004){
                //this.ncReset()
                that.$layer.msg(that.$t('l.add_79'));
            }else if(res.data.code==12002){
                //this.ncReset()
                that.$layer.msg(that.$t('l.add_80'));
            }else if(res.data.code==1020003){
                that.$layer.msg(that.$t('l.add_87'));
            }else if(res.data.code==12005){
                that.$layer.msg(that.$t('l.add_86'));
            }else{
                //this.ncReset()
                that.$layer.msg(res.data.msg);
            }
        },
        //发送邮箱验证码
        async sendEmailCode(){
            let that = this;
            let res = await api.sendEmailCodeloginIn({
                email:that.account,
                type:"L",
                preToken:that.preToken,
            })
            if(res.data.code==0){
                that.$layer.msg(that.$t('l.other_a_38'));
                that.getAuthCode();
            }else if(res.data.code==1010013){
                that.reload();
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //发送手机验证码
        async sendPhoneCode(){
            let that = this;
            let res = await api.sendPhoneCodeloginIn({
                areaCode:that.areacode,
                phone:that.account,
                type:"L",
                preToken:that.preToken,
            })
            if(res.data.code==0){
                that.$layer.msg(that.$t('l.other_a_38'));
                that.getAuthCode();
            }else if(res.data.code==1010013){
                that.reload();
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //记录登录日志
        async loginLog(){
            let that = this;
            let res = await api.loginLog({
                browser:that.browser,
                deviceType:that.deviceType,
                deviceVersion:that.deviceVersion,
                loginSource:that.loginSource,
                mac:that.mac
            })
            if(res.data.code==0){

            }
        },
        //判断当前终端
        getloginSource(){
            let that = this;
            if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
               var u = navigator.userAgent, app = navigator.appVersion;
               var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
               var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
               if(isAndroid){
                    that.loginSource = 1;
               }else if(isIOS){
                    that.loginSource = 2;
                    var IOSversion = navigator.userAgent.match(/os\s+(\d+)/i)[1] - 0;//获取iOS的系统版本号
                    if (isIOS && IOSversion < "11") {
                        that.deviceVersion = IOSversion;
                    } else {
                        that.deviceVersion = "iOS11"
                    }
               }
            }else{
                that.loginSource = 3;
            }
        },
        //判断浏览器类型
        getBrowser(){
            let that = this;
            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
            var isOpera = userAgent.indexOf("Opera") > -1;
            if (isOpera) {
                return that.browser = "Opera"
            }; //判断是否Opera浏览器
            if (userAgent.indexOf("Firefox") > -1) {
                return that.browser = "Firefox";
            } //判断是否Firefox浏览器
            if (userAgent.indexOf("Chrome") > -1){
              return that.browser = "Chrome";
            }
            if (userAgent.indexOf("Safari") > -1) {
                return that.browser = "Safari";
            } //判断是否Safari浏览器
            if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
                return that.browser = "IE";
            }; //判断是否IE浏览器
        }
    },
    mounted(){
        this.getloginSource();
        this.getBrowser();

    }
}
</script>


<style lang="less" scoped="scoped">
.padtop{padding-top:70px;}
.login{
    padding-top: 100px;
    position: absolute;
    top: 0;
    min-height: 100%;
    width: 100%;

    .comcont {
        padding-bottom: 220px;
    }
    .sideinfo{
        margin-left:130px;
        margin-top:105px;
        text-align:center;
        float:left;
        img{
            padding-bottom:31px;
                max-height: 300px;
        }
        h2{
            font-size:28px;
            font-weight:500;
            color:rgba(51,56,94,1);
            line-height:40px;
            text-align:center;
            font-familyA:"PingFangSC-Medium";
        }
        p{
            font-size:16px;
            color:#33385E;
            line-height:27px;
            font-weight:400;
            width:242px;
            padding-top:12px;
            margin:0 auto;
        }
    }
    .logonpanel{
        float:left;
        padding:0 55px 0 48px;
        background:#fff;
        box-shadow:0px 6px 18px 0px rgba(29,35,93,0.06);
        border-radius:10px;
        margin-top:82px;
        margin-left:80px;
        min-height:503px;
        position: relative;
        .regModetab{
            padding-top:20px;
            padding-bottom:24px;
            text-align:center;
            span{
                font-size:16px;
                color:#33385E;
                line-height:100%;
                padding-bottom:6px;
                box-sizing: border-box;
                margin:0 10px;
                cursor:pointer;
                &.active{
                    color:#2D8DFE;
                    border-bottom:2px solid #2D8DFE;
                }
            }
        }
        .paneltitle{
            padding-top:34px;
            text-align:center;
            font-size:22px;
            font-familyA:"Roboto-Medium";
            font-weight:500;
            color:rgba(51,56,94,1);
            line-height:25px;
            &.pdm60{
                padding-bottom:60px;
            }
        }
        .regandforget{
            padding-top:14px;
            a{
                font-size:14px;
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:20px;
            }
        }
        .sgcinfo{
            position:absolute;
            bottom:54px;
            padding-left:45px;
            font-size:16px;
            font-weight:400;
            color:rgba(51,56,94,1);
            line-height:26px;
            background:url(../assets/images/sgcico.png) no-repeat left center;
        }
        .codetip{
            padding-bottom:34px;
            font-size:16px;
            color:#33385E;
            line-height:100%;
            height:50px;
            box-sizing: border-box;
        }
    }
}

</style>
